<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>案例-商品全选</title>
</head>
<body>
<!--
商品全选
    1. 全选 点击全选按钮,所有复选框都被选中
    2. 反选 点击反选按钮,所有复选框状态取反
-->
<button id="btn1">1. 全选</button>
<button id="btn2">2. 反选</button>
<br/>
<input type="checkbox">电脑
<input type="checkbox">手机
<input type="checkbox">汽车
<input type="checkbox">别墅
<input type="checkbox" checked="checked">笔记本
<script>

    //全选
    let btn1 = document.getElementById("btn1");
    btn1.onclick = function () {

        let ele = document.querySelectorAll("input[type='checkbox']");
        for (let e of ele) {
            e.checked = true;
        }
    }
    //反选
    let btn2 = document.getElementById("btn2");
    btn2.onclick = function () {
        let ele = document.querySelectorAll("input[type='checkbox']");//括号里不能由空格，否则无法获取到
        for (let e of ele) {
            e.checked = !e.checked;
        }
    }


</script>
</body>
</html>